<template>
  <div class="dashboard-container">
    <div class="statistics row">
      <div class="statistics-item btn_labor-service">
          <div class="statistics-name">
            <div class="name-tag">用户数量</div>
            <div class="name-num">{{ headerForm.tenantNum }}</div>
          </div>
      </div>
      <div class="statistics-item btn_team">
          <div class="statistics-name">
            <div class="name-tag">人员总数</div>
            <div class="name-num">{{ headerForm.personQuantity }}</div>
          </div>
      </div>
      <div class="statistics-item btn_yesterday-wages">
          <div class="statistics-name">
            <div class="name-tag">总流水</div>
            <div class="name-num">{{ headerForm.turnover }}</div>
          </div>
      </div>
      <div class="statistics-item btn_clock-in">
          <div class="statistics-name">
            <div class="name-tag">开卡总数</div>
            <div class="name-num">{{ headerForm.openAccounts }}</div>
          </div>
      </div>
    </div>
    <div class="home-frame-item">
      <div class="home-tag">快捷入口</div>
      <div class="quickentry row" style="padding-top: 20px">
        <router-link to="/tenant/list">
          <div class="quickentry-item cloum">
            <img
              class="quickentry-item-icon"
              src="../../../../static/img/hgindex/user.png"
            />
              <p>用户管理</p>
          </div>
        </router-link>
        <router-link to="/tenroles/list">
          <div class="quickentry-item cloum">
            <img
              class="quickentry-item-icon"
              src="../../../../static/img/hgindex/role.png"
            />
            <p>用户角色</p>
          </div>
        </router-link>
        <router-link to="/authority/menu/list">
          <div class="quickentry-item cloum">
            <img
              class="quickentry-item-icon"
              src="../../../../static/img/hgindex/menu.png"
            />
            <p>菜单管理</p>
          </div>
        </router-link>
      </div>
    </div>
    <div class="home-frame-item">
      <div class="home-tag">租户数量统计</div>
      <div class="summarygraph white" ref="testLine1"></div>
    </div>
    <div class="home-frame-item">
      <div class="home-tag">银行流水统计</div>
      <div class="summarygraph white" ref="testLine2"></div>
    </div>
    <div class="home-frame-item">
      <div class="home-tag">开卡数量统计</div>
      <div class="summarygraph white" ref="testLine3"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import indexApi from '@/api/acl/index'
export default {
  created () {
    this.getTenantCounts()
  },
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "roles"]),
  },
  data() {
    return {
      myChart: null,
      option1: {
        // testLine1:{
        title: {
          text: "",
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLine: {
            lineStyle: {
              color: "#999999",
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
            lineStyle: {
              color: "#999999",
            },
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        tooltip: {
          trigger: "axis",
          // backgroundColor: "white",
          // textStyle: { color: "#999" },
          axisPointer: {
            type: "line",
          },
          // axisPointer: {
          //   type: "cross",
          //   crossStyle: {
          //     color: "#999",
          //   },
          // },
        },
        series: [
          {
            data: [30, 50, 60, 72, 79, 84, 112, 150, 175, 186, 195, 210],
            color: "#5B8FF9",
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                // color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
        ],
      },
      option2: {
        title: {
          text: "",
          // backgroundColor:'white',
          borderWidth: "200px",
        },
        tooltip: {
          trigger: "axis",
          // backgroundColor: "white",
          // textStyle: { color: "#999" },
          axisPointer: {
            type: "line",
          },
          // axisPointer: {
          //   type: "cross",
          //   crossStyle: {
          //     color: "#999",
          //     // width:15
          //   },
          // },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["租户数", "总流水"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLine: {
            lineStyle: {
              color: "#999999",
            },
          },
            // boundaryGap: false,
            // axisPointer: {
            //   type: "line",
            //   lineStyle: {
            //     width: 15,
            //     color: "#DCDCDC",
            //     opacity: 0.4,
            //     type: "solid",
            //   },
            // },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "租户数",
            min: 0,
            max: 250,
            interval: 50,
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
              lineStyle: {
                color: "#999999",
              },
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
              },
            },
          },
          {
            type: "value",
            name: "总流水",
            min: 870000,
            max: 7777000,
            interval: 1000000,
            axisLabel: {
              formatter: "￥{value}",
            },
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
              lineStyle: {
                color: "#999999",
              },
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
              },
            },
          },
        ],
        series: [
          {
            name: "租户数",
            data: [30, 50, 60, 72, 79, 84, 112, 150, 175, 186, 195, 210],
            color: "#FCA5C9",
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                // color: "#80C5F4",
                barBorderRadius: [32, 0, 32, 32],
              },
            },
          },
          {
            name: "总流水",
            data: [
              870000, 1700000, 2040000, 3024000, 4275000, 4850000, 5300000,
              5710000, 6433000, 6994000, 7269000, 7777000,
            ],
            yAxisIndex: 1,
            color: "#5B8FF9",
            type: "line",
            symbolSize: 8,
            smooth: true,
            // areaStyle: {},
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              normal: {
                color: "#80C5F4",
                borderWidth: 3,
              },
            },
          },
        ],
      },
      option3: {
        title: {
          text: "",
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLine: {
            lineStyle: {
              color: "#999999",
            },
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              width: 30,
              color: "#5B8FF9",
              opacity: 0.2,
              type: "solid",
              borderRadius: [32, 0, 32, 32],
            },
          },
        },
        yAxis: {
          type: "value",
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
              lineStyle: {
                color: "#999999",
              },
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
              },
            },
        },
        tooltip: {
          trigger: "axis",
          // backgroundColor: "white",
          // textStyle: { color: "#999" },
          axisPointer: {
            type: "cross",
            // crossStyle: {
            //   color: "#999",
            // },
          },
        },
        series: [
          {
            data: [
              20580, 44100, 59580, 67536, 74418, 49392, 82768, 77550, 160825,
              171120, 137085, 173670,
            ],
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                barBorderRadius: [32, 0, 32, 32],
                // color: "#D0E9FF",
              },

            },
            color: "#5B8FF9",
            // barWidth: 15,
          },
        ],
      },
      headerForm: {
        tenantNum: 0,
        teamNum: 0,
        personQuantity: 0,
        openAccounts: 0,
        turnover: 0
      }
    };
  },
  created(){
    this.getTenantCounts()
  },
  methods: {
    initChart() {
      const { myChart1, myChart2, myChart3, option1, option2, option3 } = this;
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
    },
    getTenantCounts(){
      indexApi.getTenantCounts().then(res=> {
        // console.log(res.data.tenantNums)
        this.headerForm.tenantNum = res.data.tenantNums
      })
      // indexApi.getTeamCounts().then(res=> {
      //   this.headerForm.teamNum = res.data.data
      // })
      indexApi.getPersonCounts().then(res=> {
        this.headerForm.personQuantity = res.data.personQuantity
      })
      indexApi.getOpenCardCounts().then(res=> {
        this.headerForm.openAccounts = res.data.openAccounts
      })
    }
  },
  mounted() {
    // 两张引入方式都可以，这里我用ref,注意一定要节点 初始化完成
    // this.myChart = this.$echarts.init(document.getElementById('testLine'))
    this.myChart1 = this.$echarts.init(this.$refs.testLine1);
    this.myChart2 = this.$echarts.init(this.$refs.testLine2);
    this.myChart3 = this.$echarts.init(this.$refs.testLine3);
    this.initChart();
    window.onresize = ()=> {
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
    }
  },
   destroyed() {
    window.onresize = null;
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
html,
body,
#app {
  height: 100%;
}

.dashboard-container {
  min-height: 100%;
  width: 100%;
}
.row {
  display: flex;
  flex-direction: row;
}
.home-tag{
  font-size: 15px !important;
}
.statistics {
  // justify-content: space-between;
  min-height: 100px;
  width: 100%;
  flex-wrap: wrap;
  margin-left: 10px;
  // margin-right: -10px;
  // align-content: flex-start;
  // &::after{
  //   content: '';
  //   flex: left;
  // }
}
.statistics > i {
  width: 200px;
  margin-right: 10px;
}
.statistics-item {
  width: 200px;
  min-width: 180px;
  height: 90px;
  background-size: 100% 100%;
  // background-color: #ffffff;
  padding-left: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: left;
  position: relative;
  color: #ffffff;
  padding-top: 15px;
  // flex-grow:1;
}
.btn_labor-service {
  background-image: url("../../tenant/dashboard/static/btn_labor-service.png");
}
.btn_team {
  background-image: url("../../tenant/dashboard/static/btn_team.png");
}
.btn_total-staff {
  background-image: url("../../tenant/dashboard/static/btn_total-staff.png");
}
.btn_request-funds {
  background-image: url("../../tenant/dashboard/static/btn_request-funds.png");
}
.btn_clock-in {
  background-image: url("../../tenant/dashboard/static/btn_clock-in.png");
}
.btn_attendance-number {
  background-image: url("../../tenant/dashboard/static/btn_attendance-number.png");
}
.btn_yesterday-wages {
  background-image: url("../../tenant/dashboard/static/btn_yesterday-wages.png");
}
.statistics-item:hover {
  cursor: pointer;
}

// .statistics-icon {
//   width: 70px;
//   height: 70px;
//   /* margin-left: 5px; */
// }

.statistics-name {
  width: 100%;
  font-size: 18px;
  line-height: 25px;
  // height: 80%;
  // position: absolute;
  // left: 80px;
  // top: 20%;
  // left: 35%;
  /* display: flex;
    flex-direction: column;
    display: inline-block; */
}

// .name-tag {
//   color: #999999;
// }

.name-num {
  font-size: 30px;
  // color: #666666;
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 35px;
}

.home-tag {
  font-size: 18px;
  font-family: "Pingfang SC";
  height: 50px;
  line-height: 50px;
  color: #333333;
  border-bottom: solid 3px #e8e8e8;
  padding-left: 15px;
  text-align: left;
  background-color: #ffffff;
  width: 100%;
  // margin-top: 20px;
}

.home-frame-item {
  width: 100%;
  min-height: 100px;
  margin: 10px;
  flex-grow: 1;
  background-color: #ffffff;
  .quickentry {
    flex-wrap: wrap;
    // background-color: #ffffff;
    min-height: 100px;
    // justify-content: space-between;
    align-content: flex-start;
    // flex-grow: 1;
  }
  .quickentry-item {
    font-size: 12px;
    text-align: center;
    width: 100px;
    // height: 100px;
    // align-content:center;
    align-items: center;
    // flex-grow: 1;
  }

  .quickentry-item:hover {
    background-color: #f9f9f9;
    cursor: pointer;
  }

  .quickentry-item:hover p {
    color: #1abc9c;
  }

  .quickentry-item p {
    margin-top: 10px;
    align-items: center;
    justify-content: center;
  }
  .quickentry-item-icon {
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
  }
  .summarygraph {
    height: 400px;
    width: 100%;
    text-align: center;
    /* background-color: gray; */
    /* margin-bottom: 20px; */
    /* border: solid 1px #E4E4E4; */
  }
}

.home-frame-right {
  width: calc(100% - 10px);
  min-height: calc(100% - 40px);
  margin: 20px 20px 20px 10px;
  .pending {
    min-height: 100%;
    width: 100%;
    // padding-bottom: 20px;
    // padding-left: 20px;
    // padding-right: 20px;
  }
  .pending-item {
    width: 100%;
    height: 50px;
    line-height: 65px;
    margin-right: 20px;
    padding-left: 15px;
    border-bottom: solid 1px #f2f2f2;
    font-size: 13px;
    /* margin-left: 20px; */
    /* color: black; */
  }

  .pending-item :hover {
    color: #1abc9c;
    cursor: pointer;
  }

  .pending-item :hover #pending-num {
    color: #1abc9c;
  }

  .pending-item .left {
    width: calc(100% - 50px);
  }
  .pending-item .right {
    width: 35px;
  }

  .pending-item .right div {
    display: inline-block;
    color: red;
  }
}

.white {
  background-color: #ffffff;
}

.summarygraph .left-statistics {
  width: 18%;
  padding: 20px 20px;
  border-right: solid 1px #ebebeb;
  margin-right: 10px;
}

.left-statistics .statistics-item {
  width: 90%;
  font-size: 10px;
  color: #989898;
}

.summarygraph .right-chart {
  height: 100%;
  width: 82%;
}
</style>
